<template>
  <div class="wrap" ref='scroll' :style="{height:height*3+'px'}">
    <ul class="group" :style="{top:top,lineHeight:height+'px'}">
      <li :style="{height:height+'px'}">{{list[list.length-2]}}</li>
      <li :style="{height:height+'px'}">{{list[list.length-1]}}</li>
      <li :style="{height:height+'px'}" v-for='i in list'>{{i}}</li>
      <li :style="{height:height+'px'}">{{list[0]}}</li>
      <li :style="{height:height+'px'}">{{list[1]}}</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import tween from 'assets/tween'
  import AlloyFinger from 'alloyfinger'
  export default {
    props: ['list', 'align', 'height'],
    data() {
      return {
        top: (-this.align - 1) * this.height + 'px',
        speed: 0,
        length: -this.list.length * this.height
      }
    },
    methods: {
      getNumber() {
        let num = Math.round((-parseInt(this.top) - this.height) / this.height)
        if(num == -1) {
          this.$emit('getNumber', this.list[this.list.length - 1])
        } else {
          this.$emit('getNumber', this.list[num])
        }
      }
    },
    mounted() {
      let timer = null;
      var af = new AlloyFinger(this.$refs.scroll, {
        touchStart: () => {
          clearInterval(timer)
          this.speed = 0
        },
        touchMove: () => {},
        touchEnd: () => {
          let t = 0,
            b = parseInt(this.top),
            c = this.speed * this.height / 5,
            d = 100,
            q = (b + c) % this.height,
            s = 0
          if(q > 25) {
            s = 0
            c += 50 - q
          } else {
            s = 1
            c -= q
          }
          /*
           * t: current time（当前时间）；
           * b: beginning value（初始值）；
           * c: change in value（变化量）；
           * d: duration（持续时间）。
           * v: quantity (回归差值)
           * s: style(回归类型)
           */
          clearInterval(timer)
          timer = setInterval(() => {
            if(t < d) {
              //Back.easeOut
              //Expo.easeOut
              //Cubic.easeOut
              //Quart.easeOut
              this.top = parseInt(tween.Quart.easeOut(t, b, c, d)) + 'px'
              if(parseInt(this.top) < this.length) {
                this.top = '0'
                b = b - this.length
              } else if(parseInt(this.top) > 0) {
                this.top = this.length + 'px'
                b = b + this.length
              }

              t++
            } else {
              clearInterval(timer)
            }
            this.getNumber()
          }, 17)

        },
        touchCancel: () => {},
        multipointStart: () => {},
        multipointEnd: () => {},
        tap: () => {},
        doubleTap: () => {},
        longTap: () => {},
        singleTap: () => {},
        rotate: (evt) => {},
        pinch: (evt) => {},
        //单点移动
        pressMove: (evt) => {
          evt.preventDefault();
          this.speed = evt.deltaY
          this.top = parseInt(this.top) + evt.deltaY + 'px';
          if(parseInt(this.top) <= this.length)
            this.top = '0'
          else if(parseInt(this.top) > 0)
            this.top = this.length + 'px'
          this.getNumber()
        },
        //扫滑，在 touchend 里触发，与 touchmove 稍有不同
        swipe: (evt) => {}
      });
    }
  }
</script>

<style lang="scss" scoped>
  .wrap {
    display: inline-block;
    overflow: hidden;
    color: #000;
    position: relative;
    .group {
      text-align: center;
      position: absolute;
      left: 0;
      width: 100%;
      li {}
    }
    &:before {
      position: absolute;
      top: 0;
      width: 100%;
      height: 33.333333%;
      z-index: 9;
      content: '';
      display: block;
      background: linear-gradient(rgba(255,255, 255, 1), rgba(255,255, 255, 1) 33.3333333%, rgba(255,255, 255, 0));
    }
    &:after {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 33.3333333%;
      z-index: 9;
      content: '';
      display: block;
      background: linear-gradient(rgba(255,255, 255, 0), rgba(255,255, 255, 1) 80%, rgba(255,255, 255, 1));
    }
    .bgc {
      position: absolute;
      top: calc(54% - 1.55rem);
      left: 8%;
      width: 84%;
      padding-top: 84%;
      background-color: rgba(255,255, 255, 1);
      border-radius: 50%;
    }
    .circle {
      position: absolute;
      top: calc(50% - 1.55rem);
      left: 0;
      width: 100%;
      padding-top: 100%;
      background: url(/static/circle.png) no-repeat center center;
      background-size: contain;
      z-index: 99;
    }
  }
</style>